<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"> 
       
<h:head>
    <link rel="shortcut icon" type="image/png" href="#{request.contextPath}/resources/images/favicon.ico"/>
    <link type="text/css" rel="stylesheet"
		href="#{request.contextPath}/resources/css/styles.css" />

    <script src="http://maps.google.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
    <script type="text/javascript">
    function geocode() {
        PF('geoMap').geocode(document.getElementById('address').value);
    }
 </script>
	<title>Event Manager</title>
</h:head>
<h:body onload="geocode()">
<div id="wrap" class="ui-grid ui-grid-responsive">
                <div id="header">
			<ui:include src="/CommonHeader.xhtml"></ui:include>
		</div>
	
            <div id="inner-wrap">
			<div id="content">
	<h:form id="event" prependId="false" >
            <p:panel id="lockMsg" style="margin-bottom:10px;" rendered="#{!eventBean.isEditable()}">
                   You cannot edit this event, you are not the owner!
            </p:panel>
		<p:panel id="panel" header="New Event Creation page: fulfill the fields of the event"
			style="margin-bottom:10px;">
			
                    <div style="float: right;">
                        Creator:
                        <p:outputLabel value="#{eventBean.evento.creator.username}" />
                    </div>   
                    <p:messages id="messages" showDetail="true" autoUpdate="true"  closable="true" showSummary="false" />
                                    <br/>
				<p:outputLabel for="title" value="Title: " />
                                <p:inputText style="margin-left: 44px; margin-bottom: 5px" id="title" required="true"
                                             value="#{eventBean.evento.title}" size="80" readonly="#{!eventBean.isEditable()}" 
                                             requiredMessage="Title is required!"/>
                                <h:panelGrid columns="4"> 
                                <p:outputLabel for="dateTimeStart" value="From: " />
                                <p:calendar style="margin-left: 30px;" id="dateTimeStart" value="#{eventBean.evento.dateTimeStart}" navigator="true" required="true" 
                                            pattern="dd/MM/yyyy HH:mm:ss" disabled="#{!eventBean.isEditable()}"
                                            requiredMessage="Start Date and Time is required!">
                                           
                                </p:calendar>
                                <p:outputLabel style="margin-left: 50px;" for="dateTimeEnd" value="To: " />
                                <p:calendar style="margin-left: 50px;" id="dateTimeEnd" value="#{eventBean.evento.dateTimeEnd}" navigator="true" required="true" 
                                            pattern="dd/MM/yyyy HH:mm:ss"  disabled="#{!eventBean.isEditable()}"
                                            requiredMessage="End Date and Time is required!">
                                             
                                </p:calendar>
                                </h:panelGrid> 
                         <h:panelGrid columns="3">       
                                <p:outputLabel for="address" value="Address: " />
                                <p:inputText style="margin-left: 5px;" id="address" required="true"
                                             value="#{eventBean.evento.address}" size="70" onchange="geocode()" readonly="#{!eventBean.isEditable()}"
                                             requiredMessage="Address is required!"/>
                                
                                <p:selectOneMenu id="eventType" value="#{eventBean.evento.type}" style="width:125px"  disabled="#{!eventBean.isEditable()}" >
                                         <f:selectItem itemLabel="Indoor" itemValue='I' />
                                         <f:selectItem itemLabel="Outdoor" itemValue='O' />
                                </p:selectOneMenu>
                        </h:panelGrid>
                        <h:panelGrid columns="2">                            
                                <p:outputLabel for="city" value="City: " />
				<p:inputText id="city" required="true"
                                             value="#{eventBean.evento.city}" size="50" readonly="#{!eventBean.isEditable()}"
                                             requiredMessage="City is required!"/>
                                <p:outputLabel for="description" value="Description: " />
				<p:inputTextarea id="description" required="false"
                                                 value="#{eventBean.evento.description}" rows="4" cols="90" readonly="#{!eventBean.isEditable()}"/>
                         </h:panelGrid> 
                                <div style="">
                             <h:panelGrid columns="3">  
                            <p:gmap id="geoGmap" widgetVar="geoMap" center="#{eventBean.centerGeoMap}" zoom="15" type="ROADMAP" model="#{eventBean.geoModel}" style="width:600px;height:350px">
                             <p:ajax event="geocode" listener="#{eventBean.onGeocode}" update="@this"  />
                             </p:gmap>
                                 <h:panelGrid id="weatherStyle">
                                     <h:panelGrid columns="2" id="weatherTab" rendered="#{eventBean.isWheatherAvailable()}">                                                                              
                                     
                                        <p:outputLabel value="Forecast Day:" />
                                        <p:outputLabel value="#{eventBean.weatherfore.dateforecast}" />
                                        <p:outputLabel value="MinTemp:" />                                     
                                        <p:outputLabel value="#{eventBean.weatherfore.mintempString}" />
                                        <p:outputLabel value="MaxTemp:" />
                                        <p:outputLabel value="#{eventBean.weatherfore.maxtempString}" />
                                        <p:outputLabel value="Weather:" />
                                        <p:outputLabel value="#{eventBean.weatherfore.weatherDesc}" /> 
                                     
                                        <div id="weatherIcon" style="height: 200px">
                                        <img src="#{eventBean.weatherfore.getWeatherIconURL()}" 
                                            alt="Weather ICON" style="height: 200px;"/>
                                        </div>                                          
                                 </h:panelGrid>                                 
                                 <h:panelGrid columns="1" id="notAvailable" style="margin-left:50px; height: 100px"> 
                                     <h:panelGrid rendered="#{!eventBean.isWheatherAvailable()}">
                                     <img src="#{request.contextPath}/resources/images/weather-icon.png" 
                                             alt="Weather_not_available" width="300px"  />
                                     </h:panelGrid>
                                     <p:commandButton value="Get Weather Forecast" ajax="true" actionListener="#{eventBean.takeWeatherForecast()}" widgetVar="startButton2" 
                                                      rendered="#{eventBean.isEditable()}" update="weatherStyle"/>                                                            
                                          <p:progressBar widgetVar="pbAjax" value="#{eventBean.progress}" labelTemplate="{value}%" styleClass="animated" displayOnly="true" 
                                                        rendered="#{eventBean.isEditable()}" >                                        
                                          </p:progressBar>
                                 </h:panelGrid>
                              </h:panelGrid>                                                         
			</h:panelGrid>    
                                </div>
		</p:panel>
            <p:commandButton value="Add Invite Users" onclick="PF('dlg2').show();" rendered="#{eventBean.isEditable()}"/>
            <p:commandButton value="Show Invited Users" onclick="PF('dlg2').show();" rendered="#{!eventBean.isEditable()}"/>
            <p:dialog header="Invitations List" widgetVar="dlg2" modal="true" width="1000" height="400">
		<h:panelGrid>
                    <h:panelGrid columns="3"> 
                    <p:watermark for="acUser" value="Search users..." rendered="#{eventBean.isEditable()}" />
			<p:autoComplete value="#{eventBean.selectedUser}" id="acUser"
				completeMethod="#{eventBean.completeUser}" forceSelection="true"
				styleClass="noBlock" rendered="#{eventBean.isEditable()}"/>
                        <p:commandButton id="inviteBtn" actionListener="#{eventBean.addInviteUser()}" value='Invite' update="invitesTab" rendered="#{eventBean.isEditable()}" />                         
                    </h:panelGrid>  
                    <p:messages for="inviteBtn" showDetail="true" autoUpdate="true" closable="true" />
			<p:dataTable id="invitesTab" var="invite"
				value="#{eventBean.inviteList}"
				paginator="true" rows="5" lazy="true"
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="5,10,15">
                                    <f:facet name="header">All Users</f:facet>
                                    	<p:column><f:facet name="header">Username</f:facet>#{invite.inviteduser.username} </p:column>
                                        <p:column><f:facet name="header">Name</f:facet>#{invite.inviteduser.name} </p:column>
                                        <p:column><f:facet name="header">Surname</f:facet>#{invite.inviteduser.surname} </p:column>
                                        <p:column><f:facet name="header">State</f:facet>#{invite.getStringState()} </p:column>
                                        <p:column>
                                        <p:commandButton id="invitedel" value="Delete"
                                                         actionListener="#{eventBean.removeInvitation(invite)}" update="invitesTab" rendered="#{eventBean.isEditable()}"
						/>
                                    </p:column> 
				</p:dataTable>
			</h:panelGrid>
                        <p:commandButton value="Close" type="button" onclick="PF('dlg2').hide();" />
        </p:dialog>  
        <p:commandButton value='Save Event' type="button" onclick="PF('saveEv').show();"
								 styleClass="block" rendered="#{eventBean.isNew()}"/>
        
        <p:commandButton value='Update Event' type="button" onclick="PF('updEv').show();"
								 styleClass="block" rendered="#{eventBean.isEdit()}"/>
        
        <p:commandButton value='Delete Event' type="button" onclick="PF('delEv').show();"
								 styleClass="block" rendered="#{eventBean.isEdit()}"/>
 
        <p:dialog  resizable="false" style="text-align: center" header="Save Event" widgetVar="saveEv" modal="true" height="100" showEffect="fade" hideEffect="explode" closable="false" >
            <h:outputText value="Are you sure?" /><br/><br/>
            <p:commandButton value="Yes" action="#{eventBean.addEvent()}" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" ajax="false"/>
            <p:commandButton value="No" onclick="PF('saveEv').hide();" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
        </p:dialog> 
        <p:dialog resizable="false" style="text-align: center" header="Update Event" widgetVar="updEv" modal="true" height="100" showEffect="fade" hideEffect="explode" closable="false">
            <h:outputText value="Are you sure?" /><br/><br/>
            <p:commandButton value="Yes" action="#{eventBean.updateEvent()}" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" ajax="false"/>
            <p:commandButton value="No" onclick="PF('updEv').hide();" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
        </p:dialog>  
        <p:dialog  resizable="false" style="text-align: center" header="Delete Event" widgetVar="delEv" modal="true" height="100" showEffect="fade" hideEffect="explode" closable="false" >
            <h:outputText value="Are you sure?" /><br/><br/>
            <p:commandButton value="Yes" action="#{eventBean.removeEvent()}" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" ajax="false"/>
            <p:commandButton value="No" onclick="PF('delEv').hide();" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
        </p:dialog> 
        
        </h:form>      
              </div>
        </div>
     </div>
    
</h:body>
</html>

